<template>
  <a-list :grid="{ gutter: 16, column: 4 }" :data-source="data">
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a-card :title="item.title">
        <video :id="index" src="https://yixuanchang.oss-cn-beijing.aliyuncs.com/v123.mp4" autoplay style="width: 360px;height: 240px" controls/>
      </a-card>
    </a-list-item>
  </a-list>
</template>

<script>
const data = [
  {
    title: '测试视频 1',
  },
  {
    title: '测试视频 2',
  },
  {
    title: '测试视频 3',
  },
  {
    title: '测试视频 4',
  },
];

export default {
  name: "CameraList",
  components: {
  },
  data() {
    return {
      data
    }
  },
  computed: {},
  created() {

  },
  methods: {

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>